// 文件设置面板
// 文件处理相关设置

import React from 'react';
import { SettingItem } from '../components/SettingItem';
import { BaseSetting, SettingsCategory, SettingType } from '../../../types/settings';

const fileSettings: BaseSetting[] = [
  {
    id: 'files.defaultEncoding',
    name: '默认编码',
    description: '新建文件的默认字符编码',
    category: SettingsCategory.Files,
    type: SettingType.Select,
    defaultValue: 'utf8',
    currentValue: 'utf8',
    group: 'encoding',
    validation: {
      options: [
        { value: 'utf8', label: 'UTF-8' },
        { value: 'gbk', label: 'GBK' },
        { value: 'ascii', label: 'ASCII' }
      ]
    },
    tags: ['编码', '文件', '默认']
  },
  {
    id: 'files.autoGuessEncoding',
    name: '自动检测编码',
    description: '打开文件时自动检测字符编码',
    category: SettingsCategory.Files,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'encoding',
    tags: ['编码', '自动', '检测']
  },
  {
    id: 'files.enableBackup',
    name: '启用备份',
    description: '自动创建文件备份',
    category: SettingsCategory.Files,
    type: SettingType.Boolean,
    defaultValue: true,
    currentValue: true,
    group: 'backup',
    tags: ['备份', '自动', '文件']
  }
];

const settingGroups = [
  {
    id: 'encoding',
    name: '编码设置',
    description: '文件编码相关设置'
  },
  {
    id: 'backup',
    name: '备份设置',
    description: '文件备份相关设置'
  }
];

export const FileSettingsPanel: React.FC = () => {
  return (
    <div className="space-y-8">
      <div>
        <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
          文件设置
        </h2>
        <p className="text-gray-600 dark:text-gray-400">
          配置文件处理和编码相关选项
        </p>
      </div>

      {settingGroups.map((group) => {
        const groupSettings = fileSettings.filter(s => s.group === group.id);
        
        return (
          <div key={group.id} className="space-y-4">
            <div>
              <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                {group.name}
              </h3>
              <p className="text-sm text-gray-600 dark:text-gray-400">
                {group.description}
              </p>
            </div>
            
            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
              <div className="divide-y divide-gray-200 dark:divide-gray-700">
                {groupSettings.map((setting) => (
                  <div key={setting.id} className="px-4">
                    <SettingItem setting={setting} />
                  </div>
                ))}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};
